<template>
    <div>
        <div class="header">
            <div class="title">{{ filmInfo.name }}</div>
            <div class="poster">
                <img v-lazy="filmInfo.poster" width="100%" height="230px" alt="" />
            </div>
            <div class="desc">
                <div class="name">
                    <div>{{ filmInfo.name }}</div>
                    <div>{{ filmInfo.filmType.name }}</div>
                    <div>{{ filmInfo.grade }}</div>
                </div>
                <div class="text-desc">
                    <div>{{ filmInfo.category }}</div>
                    <div>{{ filmInfo.premiereAt | parseTime }}上映</div>
                    <div>{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
                    <div>{{ filmInfo.synopsis }}</div>
                </div>
            </div>
        </div>

        <div class="photo1">
            <div class="actor_title">演职人员</div>
            <div class="swiper_actors">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in filmInfo.actors" :key="index">
                            <!-- 照片 -->
                            <img :src="item.avatarAddress" width="85" alt="" />
                            <!-- 名 -->
                            <div>{{ item.name }}</div>
                            <div>{{ item.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="photo2">
            <div class="juzhao_title">剧照</div>
            <div class="swiper_juzhao"></div>
        </div>
    </div>
</template>

<script>
import uri from "@/config/uri";
// 导入moment包
import moment from "moment";
// 只会帮你导入js，并不会导入css文件
import Swiper from "swiper";
// 导入css文件
import "swiper/swiper-bundle.min.css";

export default {
    created() {
        // 发通知，告知隐藏底部菜单
        this.$store.commit("global/setIsShow", false);

        let filmId = this.$route.params.filmId;
        // 发送ajax请求
        this.$http.get(uri.filmDetail + `?filmId=${filmId}&cors=T`).then((res) => {
            if (res.status === 0) {
                this.filmInfo = res.data.film;
                // 该方法用于异步渲染，当视图中存在数据需要加载完后再去重新渲染视图的时候，这个时候可以将原本需要异步以后再去执行的操作以回调的形式写在nextTick中即可。【当前的情况是，循环完毕即渲染完毕，则执行其中的代码】
                // 面试：this.$nextTick
                // $set
                this.$nextTick(() => {
                    new Swiper(".swiper-container", {
                        slidesPerView: 4,
                        spaceBetween: 30,
                    });
                });
            }
        });
    },
    // 在销毁组件时显示底部菜单
    beforeDestroy() {
        this.$store.commit("global/setIsShow", true);
    },
    data() {
        return {
            filmInfo: {
                // 给电影类型加上默认值，防止初次渲染异常
                filmType: {},
            },
        };
    },
    mounted() {
        // setTimeout(() => {
        //     new Swiper(".swiper-container", {
        //         slidesPerView: 3,
        //         spaceBetween: 30,
        //     });
        // }, 1000);
    },
    filters: {
        parseTime(time) {
            return moment(time * 1000).format("YYYY-MM-DD");
        },
    },
};
</script>

<style scoped>
.photo1 {
    margin-top: 10px;
}

.photo2 {
    margin-top: 10px;
}
</style>
